<template>
    <web-header :show="isHome" />

    <div class="nav_a center_c">
        <div class="left"> 当前位置：
            <router-link to="/">首页</router-link> &gt;
            <router-link to="/area/">目的地</router-link> &gt;
            <template v-if="detail.nationality == 1">
                <router-link to="/outbound">出境游</router-link> &gt;
            </template>
            <template v-else>
                <router-link to="/domestic">国内游</router-link> &gt;
            </template>
            <!-- <span>{{ detail.city }}旅游</span> &gt; -->
            <span>商品详情</span>
        </div>
        <div>
            <!-- <volist name="areas" id="rs"><a href="/line/{$rs.id}/">{$rs.title}</a></volist> -->
            <!-- 右边旅游推荐 /line/  -->
            <!-- <a href="">湖南</a> -->
        </div>
    </div>
    <input type="hidden" value="{$row.line_type}" id="line_type" />
    <div class="box_a center_c">
        <div class="box">
            <!-- 左侧 -->
            <div class="lefta">
                <!-- 轮播图 -->
                <div class="pics">

                    <div class="swiper-box">
                        <swiper class="swiper mySwiper2" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }"
                            :modules="modules" :loop="true" :autoplay="true" :navigation="true">
                            <swiper-slide v-for="(item, index) of bannerList" :key="index">
                                <img class="img" :src="item" />
                            </swiper-slide>
                        </swiper>
                        <swiper @swiper="setThumbsSwiper" :spaceBetween="10" class="swiper mySwiper" :slidesPerView="4"
                            :watchSlidesProgress="true" :modules="modules" :autoplay="true" :loop="true">
                            <swiper-slide v-for="(item, index) of bannerList" :key="index">
                                <img class="img" :src="item" />
                            </swiper-slide>
                        </swiper>
                    </div>


                    <!-- 右上角分类 line_type -->
                    <div class="linetype">
                        <img :src="lineTypeImg">
                    </div>
                </div>
                <!-- 日历 -->
                <div class="dates" id="calendar" style="transform: scale(1); width: 520px;">
                    <el-calendar v-model="value">
                        <template #date-cell="{ data }">
                            <div v-if="tour_list[data.day]" @click="changeCalendar(tour_list[data.day])">
                                <p :class="data.isSelected ? 'is-selected calendar-center' : 'calendar-center'">
                                    {{ data.day.split('-').slice(2).join('-') }}
                                    <!-- {{data.day}} -->
                                    <!-- data.day 为日期年月日 -->
                                    <!-- {{data.isSelected}} -->
                                </p>
                                <p class="calendar-center" style="color:red;font-size: 10px;">
                                    ￥{{ tour_list[data.day].price_a }}
                                </p>
                            </div>
                            <div v-else>
                                <p :class="data.isSelected ? 'is-selected calendar-center' : 'calendar-center'">
                                    {{ data.day.split('-').slice(2).join('-') }}
                                </p>
                            </div>
                        </template>
                    </el-calendar>
                </div>

            </div>
            <div class="leftb">
                <dl class="titlea">
                    <dt>{{ detail.title }}</dt>
                    <dd>
                        <!-- <div name="taobao_sub_titles">
                            暂无数据
                            <ul class="sub_title">
                                    <volist name="taobao_sub_titles" id="rs">
                                        <li>{$rs}</li>
                                    </volist>
                                </ul>
                                <else />
                                <ul class="sub_title">
                                    <li>{$row.intro|mb_substr=0,60,'utf-8'}</li>
                                </ul>
                        </div> -->
                        <strong style="padding-top:10px; display:block;">商品编号：【{{ detail.id }}】</strong>
                    </dd>
                </dl>
                <dl class="price">
                    <dt>
                        <!-- 春日温暖“花漾游”【赏花、春游、温泉、美食等】全新闪亮入驻！ -->
                        夏日倾情“清新游”【阳光、沙滩、海浪、冰饮等】闪亮上线！
                        <!-- 【遍山红叶舞秋色，漫地硕果展天颜】 与君相约秋天的绚丽多姿！-->
                        <!--冬季浪漫“畅冬游”【滑雪、红叶、雪景、泡温泉等】全新闪亮入驻！-->

                    </dt>
                    <dd>￥<strong id="price">{{ tour_item.price_a || tour_item.price || detail.price }}</strong>元</dd>
                    <!-- <input type="hidden" id="price_hidden" :value="detail.price" /> -->
                </dl>

                <section class="rightbox">
                    <div class="titles">行程天数：</div>
                    <div class="text"> {{ detail.line_days }}</div>
                </section>
                <section class="rightbox">
                    <div class="titles">月浏览量：</div>
                    <div class="text">{{ detail.clicks }} </div>
                </section>
                <section class="rightbox">
                    <div class="titles">收藏人数：</div>
                    <div class="text">{{ detail.likes }} </div>
                </section>
                <section class="rightbox">
                    <div class="titles">目 的 地 ：</div>
                    <div class="text">
                        <router-link v-for="rs in detail.areaArray" :key="rs.id" :to="`/line/${rs.id}`"
                            class="area-hover">{{ rs.title }}</router-link>
                    </div>
                </section>

                <section class="rightbox mb8">
                    <div class="titles">出发城市：</div>
                    <div class="package" id="citys">
                        <a @click="cityChange(item)" v-for="(item, index) in citys" :key="index"
                            :class="item.city == city_Show.city ? 'active' : ''" href="javascript:void(0)">
                            {{ item.city }}
                        </a>

                    </div>
                </section>
                <!-- 团队价格 -->
                <section class="rightbox mb8">
                    <div class="titles">套餐类型：</div>
                    <div class="package" id="package">
                        <a @click="mealChange(item)" v-for="(item, index) in meal" :key="item.id"
                            :class="mealShow == item.id ? 'active' : ''" href="javascript:void(0)">
                            {{ item.title }}
                        </a>
                    </div>
                </section>
                <!-- 定制团人数选择 -->
                <section v-if="detail.line_type && detail.line_type.id == 2" class="rightbox mb8 meal-list">
                    <div class="titles">成团人数：</div>
                    <div class="package" id="package">
                        <div v-for="(item, index) in tourDate" :key="item.id">
                            <a @click="customizationChange(item)" :class="boxShow == item.id ? 'active' : ''"
                                href="javascript:void(0)">
                                <span class="cus-num">
                                    {{ item.nums }}人团
                                </span>
                                <span class="" style="padding: 4rpx 0;color: #FF5454;text-align: center;">
                                    <span style="font-size: 18rpx;">￥</span>
                                    <span style="font-size: 28rpx;">{{ item.price }}</span>
                                </span>
                            </a>
                        </div>
                    </div>
                </section>

                <!-- 团队价格 -->

                <!--<section class="rightbox">
                <div class="titles">包团人数：</div>
                <div class="package" id="peoples">
                    <a href="javascript:void(0)" name="1">小于20人</a>
                    <a href="javascript:void(0)" name="2">20-50人</a>
                    <a href="javascript:void(0)" name="3">50-100人</a>
                    <a href="javascript:void(0)" name="4">大于100人</a>
                </div>
            </section>-->


                <!-- <notempty name="traffic">
                        <section class="rightbox mb8">
                            <div class="titles">联运价格：暂无数据</div>
                            <div class="traffic">
                                <select name="">
                                    <volist name="traffic" id="rs">
                                        <option value="{$rs[1]}">{$rs[0]} ￥{$rs[1]}元/人</option>
                                    </volist>
                                </select>
                            </div> 
                        </section>
                    </notempty> -->
                <dl class="button">
                    <dt><a id="btn-custom-size" href="https://h5.szcits.cn/chatlink.html" target="_blank">立即预订</a></dt>
                    <dd><a href="https://h5.szcits.cn/chatlink.html" target="_blank">在线咨询</a>
                    </dd>
                </dl>
                <div id="custom-size-dialogBox"></div>
                <p>商品包含：</p>
                <!-- 判断是否包含机票酒店等 动态增加 active  -->
                <ul class="bh">
                    <li :class="true ? 'active' : ''">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_03.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_06.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_08.png" width="47" height="42">
                    </li>
                    <li>
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_10.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_12.png" width="47" height="42">
                    </li>
                    <li>
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_14.png" width="47" height="42">
                    </li>
                    <li class="active">
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/free/c_16.png" width="47" height="42">
                    </li>
                </ul>
                <p>预约商品购买提示：</p> 1.购买时无需选择出游日期<br> 2.该商品于10:00开始预约，请点击前台客服按钮发起预约<br>
                3.为了您的顺利出行，请至少提前七天预约出游
            </div>
            <div class="right">
                <div class="top">...您可能还喜欢...</div>
                <ul>
                    <!-- 附近商品列表 -->
                    <li v-for="(rs, index) in correlationList" :key="rs.id">
                        <router-link @click="refreshRoute" :to="'/details/' + rs.id"><img class="img"
                                :src="rs.pic"></router-link>
                        <h3 class="ellipsis"><router-link :to="'/details/' + rs.id">{{ rs.title }}</router-link></h3>
                        <span>￥{{ rs.price }}元/人起</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 底部推荐 -->
    <div class="box_b center_c">
        <div class="" style="display: flex;">

            <aside>
                <div class="box_c">
                    <div class="top">当季特价</div>
                    <div class="bottom">
                        <!-- 数据后续更改 -->
                        <dl v-for="(rs, index) in specialOfferList" :key="rs.id">
                            <dt><router-link :to="'/details/' + rs.id"><img class="img" :src="rs.pic"></router-link>
                            </dt>
                            <dd><router-link :to="'/details/' + rs.id">{{ rs.title }}</router-link></dd>
                        </dl>
                    </div>
                </div>
                <!-- <div class="box_d" style="display:none">
                    <div class="top">旅游攻略指南</div>
                    <div class="bottom">
                        <ul>
                            <li v-for="(rs, index) in oneList" :key="rs.id">
                                <a :href="'/details/' + rs.id">{{ rs.title }}</a>
                            </li>
                        </ul>
                    </div>
                </div> -->
                <!-- <div class="left_3">
                    <div class="bottom">
                        <section v-for="(rs, index) in specialOfferList" :key="rs.id">
                            <div class="pic">
                                <a :href="'/details/' + rs.id"><img class="img" :src="rs.pic"></a>
                                <div class="info">
                                    <h3 class="ellipsis">{{ rs.title }}</h3>
                                </div>
                            </div>
                            <p class="ellipsis">{{ rs.title }}</p>
                            <p style="height: 25px;"><span
                                    style="float: right; color: #f00;padding-right: 10px;font-weight: bold;">￥{{
                                        rs.price
                                    }}元/人起</span></p>
                        </section>

                    </div>
                </div> -->
                <div id="left3"></div>
                <el-affix :offset="0">
                    <div class="sticky-element">
                        <div class="box_c left3 ">
                            <div class="top">热门推荐</div>
                            <div class="bottom">
                                <dl v-for="(rs, index) in leadingList" :key="rs.id">
                                    <dt><router-link :to="'/details/' + rs.id"><img class="img"
                                                :src="rs.pic"></router-link></dt>
                                    <dd><router-link :to="'/details/' + rs.id">{{ rs.title }}</router-link></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </el-affix>


            </aside>


            <div class="left">
                <div id="top"></div>
                <!-- 右边固定盗汗栏 -->
                <el-affix :offset="0">

                    <div class="top sticky-element" id="top1" style="width: 790px;">
                        <ul class="nav_b">
                            <!-- <notempty name="row.TravelLine.line_content">
                            <li class="active"><a href="#area1">线路详情</a></li>
                        </notempty> -->
                            <div name="days_list">
                                <li class="active"><a href="#area1">线路详情</a></li>
                                <li><a href="#area2">行程安排</a></li>

                                <!-- <li><a href="#area7">价格包含</a></li> -->
                                <!-- <li><a href="#area8">酒店介绍</a></li> -->

                                <li><a href="#area3">费用说明</a></li>
                                <!-- <li><a href="#area4">签证须知</a></li> -->
                                <!-- <li><a href="#area5">温馨提示</a></li> -->
                                <!-- <li><a href="#area6">公司风采</a></li> -->
                                <li><a href="#area7">小编力荐</a></li>
                            </div>

                            <!-- <eq name="row.line_type" value="4">
                                <li><a href="#area7">价格包含</a></li>
                            </eq>
                            <eq name="row.line_type" value="4">
                                <li><a href="#area8">酒店介绍</a></li>
                            </eq> -->

                            <!-- <if condition="$row.line_type != 4">
                                <li><a href="#area3">费用说明</a></li>
                            </if>
                            <notempty name="row.TravelLine.line_visa">
                                <li><a href="#area4">签证须知</a></li>
                            </notempty>
                            <notempty name="row.TravelLine.line_prompt">
                                <li><a href="#area5">温馨提示</a></li>
                            </notempty>
                            <li><a href="#area6">公司风采</a></li>
                            <notempty name="visa">
                                <li><a target="_blank" href="/visa/{$visa.id}.html">{$visa.title}</a></li>
                            </notempty> -->
                        </ul>
                    </div>
                </el-affix>
                <div class="center">
                    <!-- 详情图 -->
                    <div class="boxa" id="area1">
                        <div v-for="(item, index) in contentImgs" :key="index" style="font-size: 0;">
                            <img :src="item" mode="widthFix" style="width: 100%"></img>
                        </div>
                    </div>
                    <!-- 行程介绍 -->
                    <div v-if="days.length != 0" class="daybox">
                        <h1>行程介绍</h1>
                        <div id="day1">

                            <!-- <volist  name="days_list" id="rs"> -->
                            <div v-for="(rs, key) in days" :key="key" class="day" :id="`days${key + 1}`">
                                <section class="day1list">
                                    <div class="listimg"> D{{ key + 1 }}</div>
                                    <div class="gao">
                                        <h2>第{{ key + 1 }}天&nbsp;{{ rs.title }}</h2>
                                    </div>
                                </section>
                                <section class="day1air">
                                    <div class="gao">
                                        <div v-html="rs.intro_pc"></div>
                                    </div>
                                </section>
                                <section class="day1food">
                                    <div class="listimg1"><img
                                            src="https://admin.hqx.com.cn/Public/Static/images/line/food_icon.png">
                                    </div>
                                    <div class="gao">
                                        <p>
                                            [ 早餐：{{ rs.breakfast }} ]&nbsp;
                                            [ 中餐：{{ rs.lunch }} ]&nbsp;
                                            [ 晚餐：{{ rs.dinner }}]&nbsp;
                                        </p>
                                    </div>
                                </section>
                                <section class="day1hotel">
                                    <div class="listimg1"><img
                                            src="https://admin.hqx.com.cn/Public/Static/images/line/hotel_icon.png">
                                    </div>
                                    <div class="gao">
                                        <p>[ 住宿：{{ rs.sleep }} ]</p>
                                    </div>
                                </section>
                            </div>
                            <!-- </volist> -->
                        </div>
                    </div>
                    <!-- <notempty name="days_list">
                            <div class="daybox">
                                <h1>行程介绍</h1>
                                <div id="day1">
                                    <volist name="days_list" id="rs">
                                        <div class="day" id="days{$key+1}">
                                            <section class="day1list">
                                                <div class="listimg"> D{$key+1}</div>
                                                <div class="gao">
                                                    <h2>第{$key+1}天&nbsp;{$rs.title}</h2>
                                                </div>
                                            </section>
                                            <section class="day1air">
                                                <div class="gao">
                                                    <p>{$rs.intro}</p>
                                                    <div class="imgbox">
                                                        <volist name="rs['pics']" id="rs2"><img
                                                                src="https://admin.hqx.com.cn/Public/Uploads/{$rs2}"
                                                                width="170" height="110"></volist>
                                                    </div>
                                                </div>
                                            </section>
                                            <volist name="rs['dayscenics']" id="sc">
                                                <section class="day1air">
                                                    <div class="listimg1"><img
                                                            src="https://admin.hqx.com.cn/Public/Static/images/line/daysc_{$sc['type']}.png">
                                                    </div>
                                                    <div class="gao">
                                                        <p><b>{$sc.title}</b></p>
                                                        <p>{$sc.intro}</p>
                                                        <div class="imgbox">
                                                            <volist name="sc['images']" id="pics"><img
                                                                    src="https://admin.hqx.com.cn/Public/Uploads/{$pics}"
                                                                    width="170" height="110"></volist>
                                                        </div>
                                                    </div>
                                                </section>
                                            </volist>
                                            <section class="day1food">
                                                <div class="listimg1"><img
                                                        src="https://admin.hqx.com.cn/Public/Static/images/line/food_icon.png">
                                                </div>
                                                <div class="gao">
                                                    <p>[ 早餐：{$rs.breakfast} ]&nbsp;[ 中餐：{$rs.lunch} ]&nbsp;[
                                                        晚餐：{$rs.dinner}]&nbsp;</p>
                                                </div>
                                            </section>
                                            <section class="day1hotel">
                                                <div class="listimg1"><img
                                                        src="https://admin.hqx.com.cn/Public/Static/images/line/hotel_icon.png">
                                                </div>
                                                <div class="gao">
                                                    <p>[ 住宿：{$rs.sleep|mb_substr=0,30,'utf-8'} ]</p>
                                                </div>
                                            </section>
                                        </div>
                                    </volist>
                                </div>
                            </div>
                        </notempty> -->




                    <!-- 判断是否有提示内容 -->
                    <template v-if="detail.linePro">
                        <div class="title_a" id="area3" style="display: none">
                            <div class="box">
                                <span>费用<br /> 说明</span>
                            </div>
                        </div>
                        <div class="boxd">
                            <div class="sublist">
                                <h3>
                                    <div class="title">费用包含</div>
                                </h3>
                                <div v-html="detail.linePro ? detail.linePro.line_ncontain : ''" />
                                <h3>
                                    <div class="title2">费用不含</div>
                                </h3>
                                <div v-html="detail.linePro ? detail.linePro.line_ncontain : ''" />
                                <p><br>
                                </p>
                            </div>
                        </div>
                    </template>
                    <!-- <template v-if="detail.linePro">
                        <div class="title_a" id="area4">
                            <div class="box">
                                <span>签证<br /> 须知</span>
                            </div>
                        </div>
                        <div class="boxd">
                            <div class="sublist"> 
                                {$row.TravelLine.line_visa}
                                <div v-html="detail.linePro ? detail.linePro.line_visa : ''" />

                            </div>
                        </div>
                    </template> -->
                    <template v-if="detail.linePro">
                        <div class="title_a" id="area5">
                            <div class="box">
                                <span>温馨 <br /> 提示</span>
                            </div>
                        </div>
                        <div class="boxd">
                            <div class="sublist">
                                <view v-html="detail.linePro ? detail.linePro.line_prompt : ''" />
                            </div>
                        </div>
                    </template>


                    <!--<div class="title_a" id="area6">
            <div class="box">
            <img src="https://admin.hqx.com.cn/Public/Travel/images/line/1.png">
            <span>公司风采</span>
            </div>
        </div>
        <div class="boxe"> <img src="https://admin.hqx.com.cn/Public/Home/images/line/3.png"> </div>-->
                    <div class="title_a">
                        <div class="box">
                            <span>小编<br /> 推荐</span>
                        </div>
                    </div>
                    <div class="boxc">
                        <div class="list">
                            <section v-for="(rs, index) in circumList" :key="rs.id">
                                <template v-if="index < 3">
                                    <div class="box">
                                        <div class="pic">
                                            <img class="img" :src="rs.pic">
                                            <router-link :to="'/details/' + rs.id" class="link"></router-link>
                                            <a href="javascript:void(0)" class="cat">加入购物车</a>
                                        </div>
                                        <dl class="text">
                                            <dt><router-link :to="'/details/' + rs.id">{{ rs.title }}</router-link>
                                            </dt>
                                            <dd style="height:40px;">
                                                {{ rs.intro ? rs.intro : rs.mb_substr }}
                                            </dd>
                                        </dl>
                                        <div class="price"><span>市场价：￥{{ rs.mark_price }}</span>
                                            <strong>￥{{ rs.price }}元/人起</strong>
                                        </div>
                                        <dl class="button">
                                            <dt><router-link :to="'/details/' + rs.id">立即抢购</router-link></dt>
                                            <dd>销量：{{ rs.clicks }}件</dd>
                                        </dl>
                                    </div>
                                </template>
                            </section>
                        </div>
                    </div>
                </div>
                <div class="right_nav sticky-element" style="z-index: 1; background-color: #fff; ">
                    <div id="left2"></div>
                    <div class="box left_2" id="left2">
                        <div class="end_o"></div>
                        <dl>
                            <dt><a href="#area1">线路详情</a></dt>
                        </dl>
                        <dl>
                            <dt><a href="#area2">行程安排</a></dt>
                            <!-- 次级跳转 -->
                            <!-- <dd>
                                    <volist name="days_list" id="rs"><a href="#days{$key+1}">第{$key+1}天</a></volist>
                                </dd> -->
                        </dl>
                        <dl>
                            <dt><a href="#area3">费用说明</a></dt>
                        </dl>
                        <!-- <dl>
                            <dt><a href="#area4">签证须知</a></dt>
                        </dl> -->
                        <dl>
                            <dt><a href="#area5">温馨提示</a></dt>
                        </dl>
                        <!--<dl>
                    <dt><a href="#area6">公司信息</a></dt>
                </dl>
                <dl>
                    <dt><a target="_blank" href="https://qz.szcits.cn/">{$jgmdd[2]['title']}签证</a></dt>
                </dl>-->
                        <div class="end_o"></div>
                        <ul>
                            <li><a href="javascript:history.go(-1)"><img
                                        src="https://admin.hqx.com.cn/Public/Travel/images/line/k_18.png" width="45"
                                        height="45"></a>
                            </li>
                            <li><a href="#"><img src="https://admin.hqx.com.cn/Public/Travel/images/line/k_21.png"
                                        width="45" height="45"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <web-footer />
    <back-top />
    <!-- 回到顶部 -->
    <el-backtop :right="100" :bottom="100" />
</template>

<script setup>


import { ref, onMounted, computed, watch, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { line_items, line_details, line_Packages, line_Dates, line_packages_groups, line_Days, getListOther } from "@/api/travel";
// 轮播图插件
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Thumbs, Navigation, Autoplay, Zoom, FreeMode } from "swiper/modules";
const modules = [Thumbs, Navigation, Autoplay, Zoom, FreeMode]; //必须要在这里面引入，只在组件定义的属性不生效，前面这里面没有定义autoPlay导致我的组件轮播不了，一度以为是swiper没有支持缩略图轮播


const route = useRoute();

// 当前路径
let fullPath = route.fullPath;
let routeDate = route.query.id || route.params.id;

let detail = ref({}); // 详情
let content = ref(''); // 首次加载详情图片
let bannerList = ref([]) // 轮播
let citys = ref({}); // 出发城市
let meal = ref([]); //套餐
let tourDate = ref([]); // 团期
let tour_item = ref({}); // 当前团期
let navShow = ref(1); //顶部导航
let city_Show = ref({}); // 当前出发城市
let mealShow = ref(null); //套餐id
let monthsShow = ref(0); //月份
let boxShow = ref(null); //团期
let days = ref([]); // 详细行程
let scrollIndex = ref(null); //滚动条
let isHome = ref('') // 导航栏显示国内还是国外
const value = ref(new Date()) // 日历时间

// 轮播图
const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
    thumbsSwiper.value = swiper;
};

let correlationList = ref([]) // 相关产品
let specialOfferList = ref([]) // 特价产品
let leadingList = ref([]) // 主推产品
let circumList = ref([]) // 周边产品




let init = async () => {
    routeDate = route.query.id || route.params.id;
    // 发起请求获取数据
    await axios_line_details();
    // 获取套餐列表
    await axios_line_Packages();


    // 判断是否为定制团
    if (detail.value.line_type.id != 2) {
        await axios_line_Dates(mealShow.value) //团期列表
    } else {
        await axios_line_packages_groups(mealShow.value) //团体价格列表 20人 / 50人 ...
    }

    axios_line_Days(routeDate) // 行程安排
    // 多个列表
    correlationList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: '' })).data;    // 相关产品
    specialOfferList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: 1 })).data;   // 特价产品
    leadingList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: 2 })).data;        // 主推产品
    circumList.value = (await getListOther({ areas: detail.value.areas, limit: 5, type: 3 })).data;         // 周边产品

};

// 获取商品详情
let axios_line_details = async () => {
    let res = await line_details({ id: routeDate })
    res.data.areas = res.data.areas.replace(/^,|,$/g, '');
    detail.value = res.data;
    // 轮播
    bannerList.value = res.data.bannerArray;
    // 国内外
    // isHome.value = res.data.fid
    document.title = res.data.title;
    content.value = res.data.content;
}
// 获取套餐列表
let axios_line_Packages = async () => {
    let theme = await line_Packages({ id: routeDate })
    let arr = theme.data;
    citys.value = arr.reduce((prev, item) => {
        let existingItem = prev.find(itemChild => itemChild.city === item.city);

        if (existingItem) {
            // 如果找到具有相同city的项，则合并package  
            existingItem.package = [...existingItem.package, ...item.package];
        } else {
            // 如果没有找到具有相同city的项，则将当前项添加到累加器中  
            prev.push(item);
        }
        return prev;
    }, []);
    city_Show.value = theme.data[0];
    meal.value = city_Show.value.package;
    mealShow.value = meal.value[0].id;

}

// 团期列表
let axios_line_Dates = async (id) => {
    let res = await line_Dates({
        id
    })
    tourDate.value = res.data.dateArray;
    // 判断详情图切换
    if (res.data.package.content) {
        detail.value.content = res.data.package.content;
    }

    tour_list.value = {};
    for (const key in tourDate.value) {
        if (tourDate.value.hasOwnProperty(key)) {
            console.log(tourDate.value[key].dates);
            tourDate.value[key].dates.forEach(item => {
                tour_list.value[item.start_date] = item;
            });
        }
    }
    // console.log('tourDate.value:', tourDate.value);
    // console.log('tour_list.value:', tour_list.value);

    if (tourDate.value.length == 0) return; // 说明所有团期已过期
    boxShow.value = tourDate.value[0]?.dates[0]?.id;
    monthsShow.value = tourDate.value[0]?.title;
    tour_item.value = tourDate.value[0]?.dates[0] || {};
};

// 日历选择事件
const changeCalendar = (obj) => {
    // console.log('obj')
    // console.log(obj)
};

// 团体价格列表
let axios_line_packages_groups = async (id) => {
    let res = await line_packages_groups({
        id
    })
    if (res.data.length == 0) return;
    res.data.reverse();
    tourDate.value = res.data.sort((a, b) => a.nums - b.nums).map((item, index) => {
        let min_num = 1;
        if (index != 0) {
            min_num = res.data[index - 1].nums + 1;
        }
        return {
            ...item,
            min_num,
            max_num: item.nums
        }
    })
    tourDate.value.reverse();
    boxShow.value = tourDate.value[0].id;
    monthsShow.value = tourDate.value[0].title;
    tour_item.value = tourDate.value[0] || {};
};

// 行程详情
let axios_line_Days = async (pid) => {
    let res = await line_Days({
        pid
    })
    let array = res.data.map(item => {
        // item.intro = Public.htmlToText(item.intro);
        if (item.pics) {
            item.pics = item.pics.split("|").filter(item => item != "" && item != 'undefined');
        }
        return item
    })
    days.value = array;
    // console.log('array:', days.value);
};

let cityChange = async (item) => {
    if (item.city == city_Show.value.city) {

        return;
    }

    // 修改展示的套餐
    city_Show.value = item
    meal.value = city_Show.value.package
    mealShow.value = meal.value[0].id
    // 重新请求团期和参团用户
    await axios_line_Dates(mealShow.value) //团期列表


};
// 套餐切换
let mealChange = async (item) => {
    // console.log("item:", item);
    // console.log("mealShow.value:", mealShow.value);
    if (mealShow.value == item.id) return;
    detail.value.content = item.content ? item.content : content.value;
    // 判断是定制团还是跟团/当地游
    if (detail.value.line_type.id != 2) {
        // 切换团期
        await axios_line_Dates(item.id)
        mealShow.value = item.id
    } else {
        await axios_line_packages_groups(item.id) //团期列表
        mealShow.value = item.id
    }

};
// 团期月份切换
let monthChange = (id) => {
    scrollIndex.value = 'a' + id;
    monthsShow.value = id;
};

// 团期切换
let tourDateChange = async (dates, id, index) => {
    if (boxShow.value == dates.id) return;
    boxShow.value = dates.id;
    tour_item.value = dates;
};
// 定制团切换
let customizationChange = (item) => {
    if (boxShow.value == item.id) return;
    boxShow.value = item.id
    tour_item.value = item
};



onBeforeMount(() => {
    window.scrollTo(0, 0);
})

onMounted(async () => {
    await init();

});


// 详情图数组
const contentImgs = computed(() => {
    // 正则获取图片路径
    const regex = /src="([^"]+)"/g;
    let match;
    const imgPaths = [];
    while ((match = regex.exec(detail.value.content)) !== null) {
        imgPaths.push(match[1]);
    }
    return imgPaths
})

// 轮播图右侧栏 
const lineTypeImg = computed(() => {
    let imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/baotuanyou.gif";
    if (detail.value.line_type) {
        switch (detail.value.line_type.id) {
            case 1:
                imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/gentuanyou.gif";
                break;
            case 2:
                imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/zizhuyou.gif";
                break;
            case 4:
                imgPaths = "https://admin.hqx.com.cn/Public/Home/images/line/baotuanyou.gif";
                break;
        }
    }
    return imgPaths
})

// 页面重新加载
// onUpdated(() => {
//     // 判断路径是否改变
//     if (route.fullPath !== fullPath) {
//         // 重新获取数据
//         init();
//         // 页面重新加载
//         window.location.reload();
//         // 滚动调置顶
//         window.scrollTo({
//             top: 0,
//         });

//     }

// })




const refreshRoute = () => {

    //window.location.reload();
    //router.push({ path: route.path, query: { ...route.query, t: Date.now() } });
};






</script>

<style lang="scss" scoped>
@import "../../css/main_line.css";
</style>
